<template>
  <div class="about-us">
    <h1>关于我们</h1>
    <p>我们致力于打造一站式闭环就医陪伴流程的智慧陪诊产品，全方位解决患者就医难题。用户通过登录网站，即可轻松完成各项操作。</p>
    <div class="feature-section">
      <h2>陪诊预约功能</h2>
      <p>为用户提供便捷贴心的陪诊服务。用户可在线一键预约，灵活选择陪诊人员、预约时间及地点。系统详细展示陪诊人员的专业背景、服务经验及过往评价，辅助用户做出合适选择。确认服务后，支持在线支付，保障服务流程顺畅无阻。</p>
    </div>
    <div class="feature-section">
      <h2>智慧导诊模块</h2>
      <p>依托大模型技术，用户在简洁易用的表格中填写年龄、性别、症状等基本信息，系统收集后即刻传递给大模型。大模型结合医疗知识库，迅速生成精准的导诊建议报告，清晰呈现推荐科室及可能的就诊路径，如先至某科室，后续再转至其他科室等。</p>
    </div>
    <div class="feature-section">
      <h2>智慧问诊模块</h2>
      <p>借助大模型实现与用户的多轮智能问答。用户详细描述症状、病史等情况，系统依据回答进行智能分析，给出针对性的问诊建议，助力用户初步了解病症的可能病因及治疗方法。若用户对导诊报告存在疑问，也能在多轮问答中向系统提问，系统会提供详尽解答与补充建议。</p>
    </div>
    <div class="feature-section">
      <h2>个性化健康服务方案</h2>
      <p>产品依据用户的整体就医情况，为其定制个性化的健康服务方案，真正做到从患者需求出发，提供全方位、个性化的医疗服务支持。</p>
    </div>
  </div>
</template>

<script setup>
// 这里可以添加一些逻辑，如果需要的话
// 例如，可以添加页面加载动画逻辑
import { ref, onMounted } from 'vue';
const isLoading = ref(true);
onMounted(() => {
  setTimeout(() => {
    isLoading.value = false;
  }, 1500);
});
</script>

<style scoped lang="scss">
.about-us {
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

  h1 {
    color: #333;
    text-align: center;
    margin-bottom: 20px;
  }

  p {
    line-height: 1.6;
    color: #666;
  }

  .feature-section {
    margin-top: 30px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);
    padding: 20px;

    h2 {
      color: #007bff;
      margin-bottom: 15px;
    }
  }
}
</style>